<template>
    <view class="date">
        <!-- 年份 月份 -->
        <view class="month">
            <u-icon name="arrow-left-double" color="#999" @click="pickPre"></u-icon>
            <view class="u-flex">
                <u-icon name="arrow-left" color="#999" @click="weekPre"></u-icon>
                <text class="u-m-l-40 u-m-r-40">{{currentYear}}年{{currentMonth}}月</text>
                <u-icon name="arrow-right" color="#999" @click="weekNext"></u-icon>
            </view>
            <u-icon name="arrow-right-double" color="#999" @click="pickNext"></u-icon>
        </view>

        <!-- 星期 -->
        <view class="weekdays u-m-t-20">
            <text class="week-item">一</text>
            <text class="week-item">二</text>
            <text class="week-item">三</text>
            <text class="week-item">四</text>
            <text class="week-item">五</text>
            <text class="week-item">六</text>
            <text class="week-item">日</text>
        </view>
        
        <!-- 日期 -->
        <view class="days">
            <view class="day-item" @click="pick(day)" v-for="(day, index) in days" :key="index">
                <!-- 其他月 -->
                <view v-if="day.getMonth()+1 != currentMonth" 
                    :class="['item',day.getFullYear() == new Date(selectDate).getFullYear() && day.getMonth() == new Date(selectDate).getMonth() && day.getDate() == new Date(selectDate).getDate()?'active':'other-month']">
                    {{ day.getDate() }}
                </view>
                <!--本月-->
                <view v-else>
                    <text :class="['item',day.getFullYear() == new Date(selectDate).getFullYear() && day.getMonth() == new Date(selectDate).getMonth() && day.getDate() == new Date(selectDate).getDate()?'active':'']">
                        {{ day.getDate() }}
                    </text>
                </view>
            </view>
        </view>
    </view>
</template>


<script>
import tools from '@/tools/tools.js'
export default {
    name: 'date',
 
    data () {
        return {
            currentYear: 1970, // 年份
            currentMonth: 1, // 月份
            currentDay: 1, // 日期
            currentWeek: 1, // 星期
            days: [],
            selectDate: tools.formatTime(new Date()).ymd, // 选中的年月日
            year: tools.formatTime(new Date()).y, // 当前年
            month: tools.formatTime(new Date()).m, // 当前月
        }
    },
    
    mounted () {
    
    },
    
    created () {
        this.initData(null)
    },
    
    methods: {
        formatDate (year, month, day) {
            const y = year
            let m = month
            if (m < 10) m = `0${m}`
            let d = day
            if (d < 10) d = `0${d}`
            return `${y}-${m}-${d}`
        },
    
        initData (cur) {
            let date = ''
            if (cur) {
                date = new Date(cur)
            } else {
                date = new Date()
            }
            this.currentDay = date.getDate()   // 今日日期 几号
            this.currentYear = date.getFullYear()  // 当前年份
            this.currentMonth = date.getMonth() + 1 // 当前月份
            this.currentWeek = date.getDay() // 1...6,0 // 星期几
            if (this.currentWeek === 0) {
                this.currentWeek = 7
            }
            const str = this.formatDate(this.currentYear, this.currentMonth, this.currentDay)// 今日日期 年-月-日
            this.days.length = 0
            // 今天是周日，放在第一行第7个位置，前面6个 这里默认显示一周，如果需要显示一个月，则第二个循环为 i<= 35- this.currentWeek
            /* eslint-disabled */
            for (let i = this.currentWeek - 1; i >= 0; i -= 1) {
                const d = new Date(str)
                d.setDate(d.getDate() - i)
                // console.log(y:" + d.getDate())
                this.days.push(d)
            }
            for (let i = 1; i <= 7 - this.currentWeek; i += 1) {
                const d = new Date(str)
                d.setDate(d.getDate() + i)
                this.days.push(d)
            }
        },
    
        // 上个星期
        weekPre () {
            const d = this.days[0] // 如果当期日期是7号或者小于7号
            d.setDate(d.getDate() - 7)
            this.initData(d)
        },
    
        // 下个星期
        weekNext () {
            const d = this.days[6] // 如果当期日期是7号或者小于7号
            d.setDate(d.getDate() + 7)
            this.initData(d)
        },
    
        // 上一個月 传入当前年份和月份
        pickPre () {
            const d = new Date(this.formatDate(this.year, this.month, 1))
            d.setDate(0)
            this.initData(this.formatDate(d.getFullYear(), d.getMonth() + 1, 1))
            if( this.month == 1 ){
                this.year --
                this.month = 12
            }else{
                this.month --
            }
        },
    
    
        // 下一個月 传入当前年份和月份
        pickNext () {
            const d = new Date(this.formatDate(this.year, this.month, 1))
            d.setDate(35)
            this.initData(this.formatDate(d.getFullYear(), d.getMonth() + 1, 1))
            if( this.month == 12 ){
                this.year ++
                this.month = 1
            }else{
                this.month ++
            }
        },
    
        // 当前选择日期
        pick (date) {
            this.selectDate = this.formatDate(date.getFullYear(), date.getMonth() + 1, date.getDate())
            this.$emit('change',{value:this.selectDate})
        },
    },
}
</script>


<style lang="scss">
    .date {
        border-radius: 16rpx;
        border: 1rpx solid #f8f8f8;
        box-shadow: 0px 3px 5px rgba(0, 0, 0, 0.05);
        padding: 30rpx;
        .month {
            display: flex;
            justify-content: space-between;
            align-items: center;
        }

        .weekdays {
            display: flex;
            padding: 20rpx 0;
            .week-item{
                flex: 1;
                text-align: center;
                font-size: 28rpx;
                color: #ADB4BD;
                font-weight: bold;
            }
        }

        .days {
            display: flex;
            .day-item{
                flex: 1;
                display: flex;
                justify-content: center;
                align-items: center;
                font-size: 40rpx;
                .item{
                    width: 80rpx;
                    height: 80rpx;
                    display: flex;
                    justify-content: center;
                    align-items: center;
                }
                // 激活
                .active {
                    background: #21A5F3;
                    border-radius: 50%;
                    color: #fff;
                }
                // 其它月
                .other-month {
                    color: #ADB4BD;
                }
            }
        }
    }
</style>
